<template>
	<view>
		<view class="navbar">
			<view class="nav-item" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">匠人</view>
			<view class="nav-item" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">艺创新闻</view>
		</view>
		<!-- 匠人 -->
		<view class="craftsman" v-if="tabCurrentIndex == 1" v-for="(craftsman,index) in craftsman_list" :key="index"> 
			<view class="craftsman_list" >
				
				<image class="craftsman_image" :src="'http://47.119.156.67:8080/'+craftsman.img" mode=""></image>
				<view class="craftsman_right">
					<view class="craftsman_name">{{craftsman.createBy}}</view>
					<view class="craftsman_desc">{{craftsman.title}}</view>
				</view>
			</view>
			
			
		</view>
		<!-- 艺创新闻 -->
		<view class="news" v-if="tabCurrentIndex == 2" v-for="(news,index) in newsList" :key="index">
			<view class="craftsman_list">
				
				<image class="craftsman_image" :src="'http://47.119.156.67:8080/'+news.img" mode=""></image>
				<view class="craftsman_right">
					<view class="craftsman_name">{{news.createBy}}</view>
					<view class="craftsman_desc" style="color: red;">{{news.title}}</view>
				</view>
			</view>
	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 1,
				navList: [],
				craftsman_list:[],
				newsList:[],
			}
		},
		onLoad() {
			this.webNewsList();
		},
		methods: {
			tabClick(index){
				this.tabCurrentIndex = index
			},
			async webNewsList() {
				const that = this
				
					//匠人简介
					that.$api.request('/system/webNews/','/list',{
						type:1,
					}, failres => {
						console.log("failres",failres);
						
						uni.showToast({
							title: failres.msg,
							icon: "none"
						});
					}).then(res => {
						that.craftsman_list=res.rows;;
					
					})
					//#endif
				//}
				
				
				//企业动态
				that.$api.request('/system/webNews/','/list',{
					type:'2',
				}, failres => {
					console.log("failres",failres);
					
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					console.log("then res",res);
					that.newsList=res.rows;
					
				console.log(": " + JSON.stringify(res));
				
				})
				
			},
		}
	}
</script>

<style lang="scss">
	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current {
				color: $base-color;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
	.craftsman_list{
		width: 100%;
		height: 200upx;
		border-top: 1upx solid #F8F8F8;
		box-shadow: 0px 8px 8px -12px #666666;
		display: flex;
		align-items: center;
		margin-top: 20upx;
		border-radius: 20upx;
		.craftsman_image{
			width: 150upx;
			height: 150upx;
			margin-top: 15upx;
			margin-left: 25upx;
		}
		.craftsman_right{
			margin-left: 25upx;
			.craftsman_name{
				font-size: 32upx;
				color: #333333;
				margin-bottom: 10upx;
			}
			.craftsman_desc{
				font-size: 28upx;
				color: #666666;
			}
		}
	}
</style>
